<template>
  <div class="page-header-index-wide">
    <el-row>
      <el-col :span="8">
        <div class="news">
          <!-- 基本信息 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="bigFont">基本信息</span>
              <el-button
                style="float: right; padding: 3px 0; font-size: 16px"
                type="text"
                @click="handlerNews"
                >确定</el-button
              >
              <el-button
                style="float: right; padding: 3px 10px; font-size: 16px"
                type="text"
                @click="handlerInline"
                >{{ inline == false ? "编辑" : "取消" }}</el-button
              >
            </div>
            <a-form layout="inline" :model="formInline">
              <a-form-item label="站点名称">
                <a-input
                  placeholder="请输入站点名称"
                  style="width: 100%; margin-left: 30px"
                  v-model="formInline.name"
                  v-if="inline"
                ></a-input>
                <div style="margin-left: 30px; width: 100%" v-else>
                  {{ formInline.name }}
                </div>
              </a-form-item>
              <br />
              <a-form-item label="站点标识" >
                <a-input
                  placeholder="请输入站点标识"
                  style="width: 100%; margin-left: 30px"
                  v-model="formInline.identification"
                  v-if="inline"
                  disabled
                ></a-input>
                <div style="margin-left: 30px; width: 100%" v-else>
                  {{ formInline.identification }}
                </div>
              </a-form-item>
              <br />
              <a-form-item label="I P 地 址">
                <a-input
                  placeholder="请输入IP地址"
                  style="width: 100%; margin-left: 33px"
                  v-model="formInline.ip"
                  v-if="inline"
                ></a-input>
                <div style="margin-left: 33px; width: 100%" v-else>
                  {{ formInline.ip }}
                </div>
              </a-form-item>
              <br />
              <a-form-item label="服务端口">
                <a-input
                  placeholder="请输入服务端口"
                  style="width: 100%; margin-left: 30px"
                  v-model="formInline.port"
                  v-if="inline"
                ></a-input>
                <div style="margin-left: 30px; width: 100%" v-else>
                  {{ formInline.port }}
                </div>
              </a-form-item>
              <br />
              <a-form-item label="默认网关">
                <a-input
                  placeholder="请输入默认网关"
                  style="width: 100%; margin-left: 30px"
                  v-model="formInline.gateway"
                  v-if="inline"
                ></a-input>
                <div style="margin-left: 30px; width: 100%" v-else>
                  {{ formInline.gateway }}
                </div>
              </a-form-item>
              <br />
              <a-form-item label="子网掩码">
                <a-input
                  placeholder="请输入子网掩码"
                  style="width: 100%; margin-left: 30px"
                  v-model="formInline.subnet"
                  v-if="inline"
                ></a-input>
                <div style="margin-left: 30px; width: 100%" v-else>
                  {{ formInline.subnet }}
                </div>
              </a-form-item>
              <br />
              <a-form-item label="系统版本">
                <a-input
                  placeholder="请输入系统版本"
                  v-model="formInline.versions"
                  style="width: 100%; margin-left: 30px"
                  v-if="inline"
                  disabled
                ></a-input>
                <div style="margin-left: 30px; width: 100%" v-else>
                  {{ formInline.versions }}
                </div>
              </a-form-item>
              <br />
            </a-form>
          </el-card>
          <!-- 资源统计 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="bigFont">资源统计</span>
            </div>
            <a-form layout="inline">
              <a-form-item label="用  户">
                <span style="margin-left: 53px"
                  >在线 {{ arrpop }} / 禁用 {{ arrpops }} / 总数
                  {{ arrpopt }}</span
                >
              </a-form-item>
              <br />
              <a-form-item label="设  备">
                <span style="margin-left: 53px"
                  >在线 {{ devpop }} / 禁用 {{ devpops }} / 离线
                  {{ devpoptes }} / 总数 {{ devpopt }}</span
                >
              </a-form-item>
              <br />
              <a-form-item label="摄 像 机">
                <span style="margin-left: 35px"
                  >在线 {{ camerapop }} / 禁用 {{ camerapops }} / 离线
                  {{ camerapoptes }} / 总数 {{ camerapopt }}</span
                >
              </a-form-item>
              <br />
              <a-form-item label="外站连接">
                <span style="margin-left: 30px"
                  >在线 {{ platformpop }} / 禁用 {{ platformpops }} / 离线
                  {{ platformpoptes }} / 总数 {{ platformpopt }}</span
                >
              </a-form-item>
              <br />
            </a-form>
          </el-card>
          <!-- 系统服务 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="bigFont">系统服务</span>
            </div>
            <a-form layout="inline">
              <a-form-item label="媒体服务">
                <span style="margin-left: 30px"
                  >观看 {{ videopop }} / 录制 {{ videopops }}</span
                >
              </a-form-item>
              <br />
              <a-form-item label="转码服务">
                <span style="margin-left: 30px"
                  >正常 {{ escapepop }}【工作{{ escapepoptes }} / 空闲{{
                    escapepotd
                  }}】 / 禁用 {{ escapepops }} / 离线 {{ escapepops }} / 总数
                  {{ escapepopt }}</span
                >
              </a-form-item>
              <br />
              <!-- 热备服务 -->
              <!-- <a-form-item label="热备服务">
                <span style="margin-left: 30px"
                  >服务状态
                  <el-switch v-model="serve"></el-switch>
                  / 备机状态 {{ 222 }}</span
                >
              </a-form-item>
              <br /> -->
              <a-form-item label="时间服务">
                <span style="margin-left: 30px"
                  >时间同步
                  <el-switch v-model="times" @change="handlerTime"></el-switch>
                  【{{ form.adress }} / {{ form.second }}s】
                  <el-button
                    style="float: right; margin-left: 30px; font-size: 16px"
                    type="text"
                    @click="handlerForm"
                    >编辑</el-button
                  ></span
                >
                <div style="margin-left: 30px">
                  NTP服务
                  <el-switch v-model="ntps" @change="handlerNtps"></el-switch>
                </div>
              </a-form-item>
              <br />
              <!--时间服务同步  -->
              <el-dialog
                title=""
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose"
              >
                <el-form
                  ref="formData"
                  :model="formed"
                  label-width="auto"
                  :rules="rules"
                >
                  <el-form-item label="NTP服务地址" prop="adress">
                    <el-input
                      v-model="formed.adress"
                      maxlength="20"
                      required="required"
                      autocomplete="off"
                      oninput="value=value.replace(/[^0-9.]/g,'')"
                    />
                  </el-form-item>
                  <el-form-item label="同步间隔 (秒)" prop="second">
                    <el-input
                      v-model="formed.second"
                      maxlength="20"
                      required="required"
                      autocomplete="off"
                      oninput="value=value.replace(/[^0-9]/g,'')"
                    ></el-input>
                  </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button
                    type="primary"
                    @click="handlerSetting"
                    :disabled="
                      this.formed.second == '' || this.formed.adress == ''
                        ? true
                        : false
                    "
                    >确 定</el-button
                  >
                </span>
              </el-dialog>
              <a-form-item label="系统时间">
                <span style="margin-left: 30px"
                  >{{ timesNow }}
                  <el-button
                    style="float: right; margin-left: 10px; font-size: 16px"
                    type="text"
                    @click="handlerShow"
                    >编辑</el-button
                  >
                  <el-button
                    style="float: right; margin-left: 100px; font-size: 16px"
                    type="text"
                    @click="handlerTimeNow"
                    >刷新</el-button
                  >
                </span>
              </a-form-item>
              <!-- 系统时间 -->
              <el-dialog
                :visible.sync="dialogVisibled"
                width="30%"
                :before-close="handleClose"
              >
                <el-form label-width="auto">
                  <el-form-item label="更改系统时间" style="margin-left: 20px">
                    <el-date-picker
                      v-model="timesNows"
                      type="datetime"
                      placeholder="选择日期时间"
                      @change="dateChange"
                    />
                  </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisibled = false">取消</el-button>
                  <el-button
                    type="primary"
                    @click="handlerUpdate"
                    :disabled="this.nullValue"
                    >确定</el-button
                  >
                </span>
              </el-dialog>
            </a-form>
          </el-card>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="control" style="margin-left: 10px">
          <el-card style="width: 100%; bottom: 0px">
            <div slot="header" class="clearfix">
              <span class="bigFont">监控信息</span>
            </div>
            <!-- <span class="bigFont">监控信息</span> -->
            <!-- <a-divider /> -->
            <div style="margin: 10px 0">
              <!-- 添加禁用时间 -->
              <el-date-picker
                style="float: left; margin-left: 20px"
                v-model="starttime"
                type="datetime"
                placeholder="选择开始日期时间"
              >
              </el-date-picker>

              <!-- <a-date-picker
              style="float: left; margin-left: 20px"
              v-model="starttime"
              :disabled-date="disabledStartDate"
              show-time
             :allowClear="false"
              format="YYYY-MM-DD HH:mm:ss"
              placeholder=""
             /> -->

              <el-date-picker
                style="float: left; margin-left: 20px"
                v-model="endtime"
                type="datetime"
                placeholder="选择结束日期时间"
              >
              </el-date-picker>
              <el-button
                type="text"
                style="float: left; margin-left: 30px; font-size: 16px"
                @click="searchTimebtn"
                :disabled="this.starttime && this.endtime ? false : true"
                >确定</el-button
              >
              <div>
                <el-switch
                  style="float: right; margin-right: 60px"
                  v-model="info"
                  @change="turnOnOff"
                ></el-switch>
                <span type="text" style="float: right; margin-right: 10px"
                  >自动刷新</span
                >
              </div>
            </div>

            <div style="width: 100%; float: left; margin-bottom: 50px">
              <div id="mychartcpu" class="echart"></div>
              <div id="mychartram" class="echart"></div>
            </div>
            <a-divider />
            <div style="width: 100%; float: left; margin-bottom: 50px">
              <div id="mychartnet" class="echartes"></div>
              <div id="mychartgb" class="mychartses"></div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
<script>
import * as echarts from "echarts";
import moment from "moment";
import {
  Homepages,
  MochareTime,
  NtpGain,
  NtpOpen,
  NtpClose,
  NtpCancelsetting,
  NtpAutomatic,
  NtpShutautomatic,
  NtpSetting,
  NtpManual,
  NtpUpdate,
} from "@/api/api";

export default {
  name: "IndexChart",
  data() {
    return {
      timeOutOne: null,
      timer: null,
      info: false, //自动刷新
      serve: false, // 服务
      times: false, // 时间
      ntps: false, // NTP
      dialogVisible: false,
      dialogVisibled: false,
      inline: false,
      // 基本信息
      formInline: {
        name: "",
        identification: "",
        ip: "",
        gateway: "",
        port: "",
        versions: "",
        password: "",
        subnet: "",
        username: "",
      },
      starttime: "",
      endtime: "",
      resourcesDate: [],
      cpu: [],
      memory: [],
      reception: [],
      send: [],
      present: {},
      // 同步
      form: {
        adress: "",
        second: "",
      },
      // 编辑同步
      formed: {
        adress: "",
        second: "",
      },
      // 时间
      formes: {
        address: "",
      },
      timesNow: "",
      timesNows: "",
      NtpSetting: {},
      // 信息
      rules: {
        adress: [{ required: true, message: "请输入必填项!" }],
        second: [{ required: true, message: "请输入必填项!" }],
      },
      nullValue: true,
    };
  },
  mounted() {
    this.onload();
    this.ntpGainTime();

    // 时间服务
    NtpCancelsetting().then((res) => {
      if (res.code == "00000") {
        this.NtpSetting = res.data;
        this.form.adress = res.data.ip;
        this.form.second = res.data.time;

        // dialog
        this.formed.adress = res.data.ip;
        this.formed.second = res.data.time;

        this.ntps = res.data.status;
        this.times = res.data.sync;
      }
    });

    this.cpuEchart();
    this.ramEchart();
    this.netEchart();
    this.gbEchart();
  },

  watch: {
    $route(to, from) {
      //离开页面清除定时器
      if (this.timeOutOne) {
        console.log("===============清除timeOutOne定时器==============");
        clearInterval(this.timeOutOne);
        this.timeOutOne = null;
      }

      if (this.timer) {
        console.log("============清除timer定时器===========");
        clearInterval(this.timer);
        this.timer = null;
      }
    },
  },
  methods: {
    // 左侧数据
    homepages() {
      Homepages("").then((res) => {
        this.formInline = res.data.message;
        this.user = res.data.user;
        this.dev = res.data.dev;
        this.camera = res.data.camera;
        this.platform = res.data.platform;
        this.videoServer = res.data.videoServer;
        this.escapeServer = res.data.escapeServer;

        console.log("初始化的数据");
        console.log(res.data);
        this.userValue();
        this.devValue();
        this.cameraValue();
        this.platformValue();
        this.videoServerValue();
        this.escapeServerValue();
      });
    },
    // 初始数据
    onload() {
      this.homepages();
      var arrend = moment().format("YYYY-MM-DD HH:mm:ss");
      var arrbegin = moment().subtract(1, "day").format("YYYY-MM-DD HH:mm:ss");
      const params = {
        starttime: arrbegin,
        endtime: arrend,
      };
      this.mochareTime(params);
    },
    // 系统时间
    ntpGainTime() {
      let that = this;
      this.timer = setInterval(() => {
        NtpGain().then((res) => {
          if (res.code == "00000") {
            that.timesNow = res.data;
          }
        });
      }, 10000);
    },
    // 基本信息编辑
    handlerInline() {
      if (this.inline == true) {
        this.inline = false;
        this.formInline = this.formInlined;
        console.log(this.formInlined);
      } else if (this.inline == false) {
        (this.formInlined = JSON.parse(JSON.stringify(this.formInline))),
          (this.inline = true);
      }
    },
    // 基本信息确定
    handlerNews() {
      this.inline = false;
    },
    // 开启/关闭 NTP
    handlerNtps() {
      if (this.ntps == true) {
        NtpOpen().then((res) => {
          if (res.code == "00000") {
            // alert("kaiqi");
            console.log("NTP开启");
          }
        });
      } else {
        NtpClose().then((res) => {
          if (res.code == "00000") {
            // alert("GUANBI");
            console.log("NTP关闭");
          }
        });
      }
    },
    // 开启/关闭 时间
    handlerTime() {
      if (this.times == true) {
        NtpAutomatic().then((res) => {
          if (res.code == "00000") {
            // alert("kaiqi");
            console.log("时间开启");
          }
        });
      } else {
        NtpShutautomatic().then((res) => {
          if (res.code == "00000") {
            // alert("GUANBI");
            console.log("时间关闭");
          }
        });
      }
    },
    // 编辑自动同步
    handlerSetting() {
      console.log("==================handlerSetting=====================");
      var param = {
        ip: this.formed.adress,
        time: this.formed.second,
      };
      this.confirmLoading = true;
      NtpSetting(param).then((res) => {
        if (res.code == "00000") {
          this.confirmLoading = false;
          this.dialogVisible = false;
          this.$message.success("设置成功");
          // 时间服务
          NtpCancelsetting().then((res) => {
            if (res.code == "00000") {
              this.NtpSetting = res.data;
              this.form.adress = res.data.ip;
              this.form.second = res.data.time;
              this.formed.adress = res.data.ip;
              this.formed.second = res.data.time;
              this.ntps = res.data.status;
              this.times = res.data.sync;
            }
          });
        } else {
          this.confirmLoading = false;
          this.dialogVisible = false;
          this.$message.warning("设置失败");
        }
      });
    },
    // 同步时间编辑
    handlerShow() {
      this.dialogVisibled = true;
      this.timesNows = this.timesNow;
    },
    // 系统时间确定
    handlerUpdate() {
      let that = this;
      let trueTime = moment(this.timesNows).format("YYYY-MM-DD HH:mm:ss");
      console.log(people);
      let param = {
        date: trueTime,
      };
      NtpUpdate(param).then((res) => {
        if (res.code == "00000") {
          // this.timesNow = res.data;
          this.$message.success("修改成功");
        } else {
          this.$message.warning("修改失败");
        }
        that.dialogVisibled = false;
      });
    },
    // 时间刷新
    handlerTimeNow() {
      var param = {
        ip: this.form.adress,
      };
      NtpManual(param).then((res) => {
        if (res.code == "00000") {
          this.timesNow = res.data;
          this.$message.success("刷新成功");
        } else {
          this.$message.warning("刷新失败");
        }
      });
    },
    // 时间服务编辑
    handlerForm() {
      this.dialogVisible = true;
    },

    // 日期变化
    dateChange(value) {
      console.log("======================dateChange=====================");
      console.log(value);
      if (value == null) {
        this.nullValue = true;
      } else {
        this.nullValue = false;
      }
    },
    // 用户
    userValue() {
      let arrname = [];
      let arrnames = [];
      let arrpopts = [];
      this.user?.forEach((item) => {
        if (item.typename == "在线") {
          arrname.push(item.num);
        } else if (item.typename == "禁用") {
          arrnames.push(item.num);
        } else if (item.gross) {
          arrpopts.push(item.gross);
        }
      });
      this.arrpop = arrname[0];
      this.arrpops = arrnames[0];
      this.arrpopt = arrpopts[0];
    },
    // 设备
    devValue() {
      let arrname = [];
      let arrnames = [];
      let arrpopts = [];
      let arrpopt = [];
      this.dev?.forEach((item) => {
        if (item.typename == "在线") {
          arrname.push(item.num);
        } else if (item.typename == "禁用") {
          arrnames.push(item.num);
        } else if (item.gross) {
          arrpopts.push(item.gross);
        } else if (item.typename == "掉线") {
          arrpopt.push(item.num);
        }
      });
      this.devpop = arrname[0];
      this.devpops = arrnames[0];
      this.devpopt = arrpopts[0];
      this.devpoptes = arrpopt[0];
    },
    // 摄像机
    cameraValue() {
      let arrname = [];
      let arrnames = [];
      let arrpopts = [];
      let arrpopt = [];
      this.camera?.forEach((item) => {
        if (item.typename == "在线") {
          arrname.push(item.num);
        } else if (item.typename == "禁用") {
          arrnames.push(item.num);
        } else if (item.gross) {
          arrpopts.push(item.gross);
        } else if (item.typename == "掉线") {
          arrpopt.push(item.num);
        }
      });
      this.camerapop = arrname[0];
      this.camerapops = arrnames[0];
      this.camerapopt = arrpopts[0];
      this.camerapoptes = arrpopt[0];
    },
    // 外站链接
    platformValue() {
      let arrname = [];
      let arrnames = [];
      let arrpopts = [];
      let arrpopt = [];
      this.platform?.forEach((item) => {
        if (item.typename == "在线") {
          arrname.push(item.num);
        } else if (item.typename == "禁用") {
          arrnames.push(item.num);
        } else if (item.gross) {
          arrpopts.push(item.gross);
        } else if (item.typename == "掉线") {
          arrpopt.push(item.num);
        }
      });
      this.platformpop = arrname[0];
      this.platformpops = arrnames[0];
      this.platformpopt = arrpopts[0];
      this.platformpoptes = arrpopt[0];
    },
    //媒体服务
    videoServerValue() {
      let arrname = [];
      let arrnames = [];
      this.videoServer?.forEach((item) => {
        if (item.typename == "观看中") {
          arrname.push(item.num);
        } else if (item.typename == "录制中") {
          arrnames.push(item.num);
        }
      });
      this.videopop = arrname[0];
      this.videopops = arrnames[0];
    },
    //转码服务
    escapeServerValue() {
      let arrname = [];
      let arrnames = [];
      let arrpopts = [];
      let arrpopt = [];
      let arrpoptes = [];
      this.escapeServer?.forEach((item) => {
        if (item.typename == "在线") {
          arrname.push(item.num);
        } else if (item.typename == "禁用") {
          arrnames.push(item.num);
        } else if (item.gross) {
          arrpopts.push(item.gross);
        } else if (item.typename == "工作") {
          arrpopt.push(item.num);
        } else if (item.typename == "空闲") {
          arrpoptes.push(item.num);
        }
      });
      this.escapepop = arrname[0];
      this.escapepops = arrnames[0];
      this.escapepopt = arrpopts[0];
      this.escapepoptes = arrpopt[0];
      this.escapepotd = arrpoptes[0];
    },

    disabledDate(startValue) {
      const endValue = this.endValue;
      // ----时间选择限制---
      // if (!startValue || !endValue) {
      //   return startValue && startValue > moment().endOf("day");
      // }
      // return (
      //   startValue.valueOf() > endValue.valueOf() ||
      //   (startValue && startValue > moment().endOf("day"))
      // );

      return startValue && startValue >= moment().endOf("day");
    },
    //时间查找
    searchTimebtn() {
      var arrbegin = moment(this.starttime).format("YYYY-MM-DD HH:mm:ss");
      var arrend = moment(this.endtime).format("YYYY-MM-DD HH:mm:ss");

      // 判断时间
      // 结束不能早于开始
      let start = arrbegin.replace(/-/g, "");
      let starts = start.replace(/:/g, "");
      let startes = starts.replace(/ /g, "");

      let end = arrend.replace(/-/g, "");
      let ends = end.replace(/:/g, "");
      let endes = ends.replace(/ /g, "");

      if (startes > endes) {
        console.log("开始时间与结束时间判断", startes, endes);
        this.$message.warning("开始时间应早于结束时间！");
        this.endtime = moment().format("YYYY-MM-DD HH:mm:ss");
        this.starttime = moment()
          .subtract(1, "day")
          .format("YYYY-MM-DD HH:mm:ss");
        return;
      }
      //

      const params = {
        starttime: arrbegin,
        endtime: arrend,
      };
      console.log(params);
      this.mochareTime(params);
    },
    // echart1
    cpuEchart() {
      const mulColumnZZTData = {
        tooltip: {
          formatter: function (params) {
            // console.log("==============mycharts执行了==========");
            // console.log(params);
            var relVal = params[0].name;
            for (var i = 0, l = params.length; i < l; i++) {
              relVal += "<br/>" + params[i].marker + params[i].value + "%";
            }
            return relVal;
          },
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        title: {
          left: "center",
          text: "CPU使用率",
        },
        xAxis: {
          type: "category",
          // boundaryGap: false,
          data: this.resourcesDate,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}%",
          },
        },
        // 滑动条
        dataZoom: [
          {
            type: "slider",
            // show:true,
            start: 100,
            end: 95,
          },
          {
            type: "inside",
            start: 100,
            end: 95,
          },
          {
            xAxisIndex: 0, //这里是从X轴的0刻度开始
            show: false, //是否显示滑动条，不影响使用
            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 9, // 一次性展示10个。
          },
        ],
        series: [
          {
            name: "CPU",
            type: "line",
            symbol: "none",
            // smooth: true,
            // sampling: "lttb",
            itemStyle: {
              color: "rgb(255, 70, 131)",
            },
            data: this.cpu,
            label: {
              normal: {
                show: true,
                position: "outside",
                formatter: "{c}%", // 这里是数据展示的时候显示的数据
              },
            },
          },
        ],
      };
      const myChartcpu = echarts.init(document.getElementById("mychartcpu"));
      myChartcpu.setOption(mulColumnZZTData);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChartcpu.resize();
      });
    },
    // echart2
    ramEchart() {
      const mulColumnZZTData = {
        tooltip: {
          formatter: function (params) {
            console.log("==============mycharts执行了==========");
            console.log(params);
            var relVal = params[0].name;
            for (var i = 0, l = params.length; i < l; i++) {
              relVal += "<br/>" + params[i].marker + params[i].value + "%";
            }
            return relVal;
          },
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        title: {
          left: "center",
          text: "内存使用率",
        },
        xAxis: {
          type: "category",
          // boundaryGap: false,
          data: this.resourcesDate,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}%",
          },
        },
        // 滑动条
        dataZoom: [
          {
            type: "slider",
            // show:true,
            start: 100,
            end: 95,
            handleSize: 8,
          },
          {
            type: "inside",
            start: 100,
            end: 95,
          },
          {
            xAxisIndex: 0, //这里是从X轴的0刻度开始
            show: false, //是否显示滑动条，不影响使用
            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 9, // 一次性展示10个。
          },
        ],
        series: [
          {
            name: "内存",
            type: "line",
            symbol: "none",
            // smooth: true,
            // sampling: "lttb",
            itemStyle: {
              color: "rgb(255, 70, 131)",
            },
            data: this.memory,
            label: {
              normal: {
                show: true,
                position: "outside",
                formatter: "{c}%", // 这里是数据展示的时候显示的数据
              },
            },
          },
        ],
      };
      const myChartram = echarts.init(document.getElementById("mychartram"));
      myChartram.setOption(mulColumnZZTData);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChartram.resize();
      });
    },
    // echart3
    netEchart() {
      // 多列柱状图
      const mulColumnZZTData = {
        title: {
          text: "网络输入输出",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
          formatter: function (params) {
            var relVal = params[0].name;
            for (var i = 0, l = params.length; i < l; i++) {
              relVal += "<br/>" + params[i].marker + params[i].value + "Mb/S";
            }
            return relVal;
          },
        },
        legend: {
          data: ["输入", "输出"],
        },
        dataZoom: [
          {
            type: "slider",
            show: true,
            start: 100,
            end: 95,
            handleSize: 8,
          },
          {
            type: "inside",
            start: 100,
            end: 95,
          },
        ],
        xAxis: {
          type: "category",
          data: this.resourcesDate,
        },
        yAxis: {
          type: "value",
          axisLine: {
            formatter: "{value}Mb/S",
          },
        },
        series: [
          {
            symbol: "none",
            name: "输入",
            type: "line",
            // stack: 'Total',
            // smooth: true,
            data: this.reception,
            label: {
              normal: {
                show: true,
                position: "outside",
                formatter: "{c}Mb/S", // 这里是数据展示的时候显示的数据
              },
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                },
              },
            },
          },
          {
            symbol: "none",
            name: "输出",
            type: "line",
            // smooth: true,
            // stack: 'Total',
            data: this.send,
            label: {
              normal: {
                show: true,
                position: "outside",
                formatter: "{c}Mb/S", // 这里是数据展示的时候显示的数据
              },
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                },
              },
            },
          },
        ],
      };
      const myChartwan = echarts.init(document.getElementById("mychartnet"));
      myChartwan.setOption(mulColumnZZTData);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChartwan.resize();
      });
    },
    // echart4
    gbEchart() {
      var chartDom = document.getElementById("mychartgb");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: "磁盘占用",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "13%",
          left: "center",
        },
        series: [
          {
            name: "具体数值(GB)",
            type: "pie",
            // radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "22",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: this.present.resourcesoccupancy, name: "占用磁盘" },
              {
                value:
                  this.present.resourcesgross - this.present.resourcesoccupancy,
                name: "剩余磁盘",
              },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    // 自动刷新
    turnOnOff() {
      if (this.info == true) {
        this.timeOutOne = setInterval(() => {
          var arrend = moment().format("YYYY-MM-DD HH:mm:ss");
          var arrbegin = moment()
            .subtract(1, "day")
            .format("YYYY-MM-DD HH:mm:ss");
          this.starttime = arrbegin;
          this.endtime = arrend;
          const params = {
            starttime: arrbegin,
            endtime: arrend,
          };
          this.mochareTime(params);
        }, 5000);
      } else {
        clearInterval(this.timeOutOne);
        this.timeOutOne = null;
      }
    },
    // 右侧请求
    mochareTime(params) {
      console.log(params);
      MochareTime(params).then((res) => {
        console.log("==============121212121=================");
        console.log(res);

        // 时间
        let arr = [];
        res.data.history.resourcesDate.forEach((item) => {
          // console.log(item);
          // console.log("时间数据");
          var index = item.lastIndexOf("-");
          var n = item.substring(index + 1, item.length);
          arr.push(n);
        });
        this.resourcesDate = arr;

        // cpu
        let cpuFloat = [];
        res.data.history.cpu.forEach((item) => {
          // console.log(item);
          var float = parseFloat(item);
          cpuFloat.push(float);
        });
        console.log(res.data.history.cpu);
        this.cpu = cpuFloat;

        // 内存
        let memoryFloat = [];
        res.data.history.memory.forEach((item) => {
          // console.log(item);
          var float = parseFloat(item);
          memoryFloat.push(float);
        });
        this.memory = memoryFloat;
        console.log(this.memory);

        // 输入
        let receptionFloat = [];
        res.data.history.reception.forEach((item) => {
          // console.log(item);
          var float = parseFloat(item);
          receptionFloat.push(float);
        });
        this.reception = receptionFloat;

        // 输出
        let sendFloat = [];
        res.data.history.send.forEach((item) => {
          // console.log(item);
          var float = parseFloat(item);
          sendFloat.push(float);
        });
        this.send = sendFloat;

        //磁盘数据
        console.log(res.data.present);
        this.present = res.data.present;
        console.log("===============MochareTime数据执行================");
        console.log(this.cpu);
        console.log(this.memory);
        console.log(this.resourcesDate);
        console.log(this.reception);
        console.log(this.send);

        this.cpuEchart();
        this.ramEchart();
        this.netEchart();
        this.gbEchart();
      });

      console.log(params);
      this.starttime = params.starttime;
      this.endtime = params.endtime;
    },
  },
};
</script>

<style lang="less" scoped>
.page-header-index-wide {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.box-card {
  margin-bottom: 15px;
}





.bigFont {
  font-size: 20px;
}

.echart {
  margin-top: 30px;
  width: 50%;
  height: 380px;
  float: left;
}
.echartes {
  margin-top: 30px;
  float: left;
  width: 75%;
  height: 380px;
}

.mychartses {
  margin-top: 30px;
  width: 25%;
  height: 380px;
  float: left;
}
</style>